<template>
  <div class="history-hot">
    <!-- 历史记录 -->
    <div class="his-hot" v-if="isShowHistory">
      <!-- 头部 -->
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearFn" />
      </div>
      <!-- 内容 -->
      <div class="bd">
        <van-tag
          type="default"
          v-for="(item,index) in searchHistoryData"
          :key="index"
          @click="goSearch(item)"
          plain
        >
          {{ item }}
        </van-tag>
      </div>
      <!-- 热门搜索 -->
      <div class="is-hot">
        <div class="hd">
          <h4>热门搜索</h4>
        </div>
        <div class="bd">
          <van-tag
            v-for="(item,index) in searchHotData"
            :key="index"
            @click="goSearch2(item.keyword)"
            plan
            :type="item.is_hot ? 'danger' : 'default'"
          >
            {{ item.keyword }}
          </van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入清除历史记录请求
import { Clearhistory } from "../../https/http";
export default {
  name: "HistoryHot",
  methods: {
    //清除历史记录
    clearFn() {
      Clearhistory().then(
        (res) => {
          console.log(res);
          if (res.errno == 0) {
            alert("历史记录清除成功");
            this.isShowHistory = false;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    //点击历史记录进行搜索=> 子组件将关键字传递给父组件
    goSearch(item) {
      //   console.log(item);
      this.$emit("goSearch", item);
    },
    goSearch2(item){
      this.$emit("goSearch", item);
    }
  },
  props: ["searchHistoryData", "searchHotData"],
  data() {
    return {
        // 清除历史记录切换是否显示
      isShowHistory: true,
    };
  },
};
</script>

<style lang='less' scoped>
/* @import url(); 引入css类 */
.history-hot {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  .his-hot {
    background-color: #fff;
    padding: 2%;
    .hd {
      padding-top: 2%;
      display: flex;
      justify-content: space-between;
    }
    .bd {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .van-tag {
        padding: 3px;
        margin: 0 2px;
      }
    }
  }
}
</style>